<template>

  <baidu-map
    :scroll-wheel-zoom="true"
    class="bm-view"
    :center="center"
    :zoom="zoom"
    @ready="handler"
  >
    <bm-polyline
      :path="pointsList"
      stroke-color="blue"
      :stroke-opacity="0.5"
      :stroke-weight="2"
      @lineupdate="updatePolylinePath"
    />
    <!-- <bm-map-type
      :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
      anchor="BMAP_ANCHOR_TOP_RIGHT"
    /> -->
    <bm-marker
      v-for="(item,index) in markerList"
      :key="index"
      :icon="{url: item.icon, size: {width: 38, height: 38}}"
      :position="item.point"
    />
  </baidu-map>

</template>

<script>
  import kprk from '@/assets/kprk2.png'
  import yhqs from '@/assets/yhqs2.png'
  import zpck from '@/assets/zpck2.png'
  import zprk from '@/assets/zprk2.png'
  import gpdd from '@/assets/gpdd2.png'
  import cz from '@/assets/cz2.png'

  export default {
    name: 'csm-location',
    props: {
      cylinderInfo: {
        type: Object,
        required: true,
        circList: []
      },
      city: {
        type: String
      }
    },
    data() {
      return {
        kprk,
        yhqs,
        zpck,
        zprk,
        gpdd,
        cz,
        center: { lng: 114.305, lat: 30.592 },
        zoom: 15,
        show: false,
        detail: {},
        pointsList: [],
        markerList: []
      }
    },
    created() {
    },
    methods: {
      handler({ BMap, map }) {
        this.zoom = 15
        console.log('aaaaa', this.cylinderInfo)
        console.log('bbbbb', this.cylinderInfo.circList)
        if (this.cylinderInfo.circList) {
          const circList = JSON.parse(JSON.stringify(this.cylinderInfo.circList))

          circList.forEach(item => {
            if (item.lon && item.lat) {
              this.pointsList.push({
                lng: Number(item.lon),
                lat: Number(item.lat)
              })
              this.markerList.push({
                point: {
                  lng: Number(item.lon),
                  lat: Number(item.lat)
                },
                icon: item.operateType === 1 ? kprk
                  : item.operateType === 6 ? yhqs
                    : item.operateType === 3 ? zprk
                      : item.operateType === 4 ? kprk
                        : item.operateType === 2 ? cz : gpdd
              })
            }
          })
        }
        console.log(this.pointsList, this.markerList)
        // 自动获取展示的比例
        if (this.pointsList.length > 0) {
          // eslint-disable-next-line no-eval
          var view = map.getViewport(eval(this.pointsList))
          this.zoom = view.zoom
          this.center = view.center
        } else {
          this.zoom = 12
          this.center = this.city
        }
      },
      updatePolylinePath() {}
    }
  }
</script>

<style lang="scss" scoped>
.bm-view {
  width: 100%;
  height: 100%;
}
.title {
  display: flex;
  padding: 20px 20px 0 20px;
  margin-bottom: 20px;
  .title-text {
    line-height: 25px;
  }
  .tag {
    margin: 0 10px;
  }
}
</style>
